<template>
    <view class="content">
		<view class="contop">
			<view>{{detail.refund_status>0?return_types[detail.refund_status]:pay_types[detail.status]}}</view>
			<view v-if="detail.status==3&&detail.refund_status==0">期待您的评价哦~</view>
			<view v-if="detail.status==6&&detail.orderevaluate_delete==1">评价已删除~</view>
			<view v-if="detail.status==2&&detail.refund_status==0">可点击去使用，出示券码核销~</view>
			<view v-if="detail.refund_status==3"><span style="max-width:70%;display:inline-block;float:left;">驳回原因:{{detail.refund_result}}~</span><span @tap="jump('/subcontract/shop/Negotiate?id='+id)">查看协商历史  ></span></view>
			<view v-if="detail.refund_status==1||detail.refund_status==2">退款金额:{{detail.pay_money}}<span @tap="jump('/subcontract/shop/Negotiate?id='+id)">查看协商历史  ></span></view>
			<!-- <view v-if="detail.refund_status==2">平台已同意退款~</view> -->
			
			<view v-if="detail.status==1" style="display: flex;">
				<span>剩余时间：</span>
				<u-count-down :timestamp="detail.sheng_time" :show-border="true" font-size="28" color="#fff" separatorColor="#fff" borderColor="rgba(255,255,255,0)" bgColor="rgba(255,255,255,0)" :show-days="false" :show-hours="false"></u-count-down>
			</view>
			
		</view>
		<view class="contentop">
			<view class="contxt">
				<view class="list">
					<view @tap="jump('/subcontract/shop/index?id='+detail.shop.id)">
						<view class="txt2">
							<view><span>{{detail.shop.name}}</span><image src="/static/rzicon.png" mode="widthFix"></image></view>
						</view>
						<view class="cplist">
							<view>
								<image :src="imgoss+detail.goods.pic" mode="aspectFill" class="zrimg"></image>
								<view>
									<view>{{detail.goods.name}}</view>
									<view>{{detail.order_time}}</view>
									<view>
										<view><span>￥</span>{{detail.goods.money}}</view>
										<view>x{{detail.number}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="contxt1">
				<view class="ztxt">备注</view>
				<view class="ztxt1">{{detail.info?detail.info:'暂无备注~'}}</view>
			</view>
			<!-- <view class="contxt1" v-if="detail.refund_reason">
				<view class="ztxt">驳回原因</view>
				<view class="ztxt1">{{detail.refund_reason}}</view>
			</view> -->
			<view class="contxt2">
				<view>
					<view>联系人</view>
					<view>{{detail.user_name}}</view>
				</view>
				<view>
					<view>联系电话</view>
					<view>{{detail.mobile}}</view>
				</view>
			</view>
			<view class="contxt3">
				<view>
					<view>价格明细</view>
				</view>
				<view>
					<view>商品总价</view>
					<view>￥{{detail.pay_money}}</view>
				</view>
				<view>
					<view>优惠卷</view>
					<view>-￥{{detail.coupon_money}}</view>
				</view>
				<view>
					<view style="color: #D9688E;">实付款</view>
					<view style="color: #D9688E;">￥{{detail.pay_money}}</view>
				</view>
			</view>
			<view class="contxt3">
				<view>
					<view>订单信息</view>
				</view>
				<view>
					<view>订单编号</view>
					<view>
						<span>{{detail.order_number}}</span>
						<image @tap="copyText(detail.order_number)" src="/static/fz.png" mode="widthFix"></image>
					</view>
				</view>
				<view>
					<view>创建时间</view>
					<view>{{detail.create_time}}</view>
				</view>
				<view v-if="detail.pay_time">
					<view>付款时间</view>
					<view>{{detail.pay_time}}</view>
				</view>
				<view v-if="detail.order_time">
					<view>完成时间</view>
					<view>{{detail.order_time}}</view>
				</view>
			</view>
		</view>
		<view class="forbtn">
			<view>
				<view class="btn2" v-if="detail.refund_status==0&&detail.status==1" @tap="orderChancel">取消订单</view>
				<view class="btn2" v-if="detail.refund_status==0&&(detail.status<3&&detail.status>1)||detail.refund_status==3" @tap="jump('/subcontract/shop/Applyrefund?id='+id)">{{detail.refund_status==3?'重新申请':'申请退款'}}</view>
				<view class="btn2" v-if="detail.refund_status>0&&(detail.refund_status==1||detail.refund_status==3)" @tap="orderChancelRefund">取消退款</view>
				<view class="btn2" v-if="detail.refund_status==2" @tap="orderDelete">删除订单</view>
				<view class="btn1" v-if="detail.refund_status==0&&detail.status==2" @tap="jump('/subcontract/shop/Ticketcode?id='+id)">去使用</view>
				<view class="btn2" v-if="detail.refund_status==0&&detail.status==3" @tap="jump('/subcontract/shop/evform?id='+id)">评论</view>
					<view class="btn2" v-if="detail.status==6&&detail.orderevaluate_delete!=1" @tap="jump('/subcontract/shop/evform?id='+id+'&type=1')">查看评论</view>
				<view class="btn1" v-if="detail.refund_status==0&&detail.status==1" @tap="OrderOrderPay">立即支付</view>
			</view>
		</view>
		<view class="weixin-tip" v-if="checks==true" @tap="checks = !checks">
		    <image src="/static/llq.png" mode="widthFix">
		</view>
    </view>
</template>

<script>
const app = getApp();
var util = require('../../utils/util.js');
export default {
    data() {
        return {
			imgoss: app.globalData.imgoss,
            id: 0,
			detail:null,
			pay_types:['','待付款', '待使用', '待评价', '已取消', '已退款', '已评价'],
			return_types:['', '已提交申请', '退款成功', '退款驳回'],
			pay_types1:['','待付款', '可点击去使用，出试卷码核销~', '期待您的评价哦~', '已取消', '已退款'],
			return_types1:['', '退款审核中', '已提交申请', '退款驳回'],
			checks:false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        var that = this;
		this.id = options.id
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
		this.UserorderDes()},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
		copyText(e) {
			uni.setClipboardData({
			  data: e,
			  success: () => {
				uni.showToast({ title: '复制成功', duration: 2000 });
			  },
			  fail: (res) => {
				//console.log(res);
				uni.showToast({ title: '复制失败', icon: 'none', duration: 2000 });
			  }
			});
		},
		UserorderDes(){
			var that = this;
			app.globalData.api.request('User/orderDes', {
				page:this.page,
				id:this.id,
			}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					//console.log(res.data)
					this.detail = res.data
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		jump(url){
			uni.navigateTo({
				url:url
			})
		},
		// 支付接口
		OrderOrderPay(id,idx){
			var that = this;
			uni.showLoading({
				title: '调起中...'
			});
			app.globalData.api.request('User/orderAliByOrderId', {
				id:this.id
			}, 'POST', 'form').then((res) => {
				if (res.code == 0) {
					// #ifdef H5
					
					uni.setStorageSync('types', '');
					uni.setStorageSync('orderId',  '');
					uni.setStorageSync('orderNumber',  '');
					uni.setStorageSync('receivedPayMoney',  '');
					uni.navigateTo({
						// url:'/subcontract/yd?order_number='+this.id+"&type=2"
						// 跳转到支付中心的页面
						url: `/pages/paycenter/paycenter?price=${that.detail.pay_money}&orderId=${that.id}&type=2`
					})
					// if(util.isWechat()==true){
						
					// 	// this.checks = true
					// 	//  uni.setClipboardData({
					// 	// 	data: res.data,
					// 	// 	success: function () {
					// 	// 	}
					// 	//   });
					// }else{
					// 	this.checks = false
					// 	uni.setStorageSync('paytype', 1)
					// 	window.open(res.data,'_self');
					// }
					uni.hideLoading();
					// #endif
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		orderDelete(idx,id){
			var that = this;
			uni.showModal({
				title: '温馨提示',
				content: '是否确认删除该订单？',
				success: function (res) {
					if (res.confirm) {
						app.globalData.api.request('User/orderDelete', {
							id:that.id,
						}, 'POST', 'form').then((res) => {
							if (res.code == 0) {
								app.globalData.d('删除成功~')
							}else{
								app.globalData.show(res.msg)
							}
						});
					} else if (res.cancel) {
						//console.log('用户点击取消');
					}
				}
			});
			
		},
		// 取消退款
		orderChancelRefund(idx,id){
			app.globalData.api.request('User/orderChancelRefund', {
				id:this.id,
			}, 'POST', 'form').then((res) => {
				if (res.code == 0) {
					
					this.UserorderDes()
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		// 取消订单
		orderChancel(idx,id){
			app.globalData.api.request('User/orderChancel', {
				id:this.id,
			}, 'POST', 'form').then((res) => {
				if (res.code == 0) {
					
					this.UserorderDes()
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
	}
};
</script>
<style>
	
	.btn2{
		width: auto;
		padding: 0px 30rpx;
		height: 60rpx;
		border: 2rpx solid #8665AF;
		box-sizing: border-box;
		border-radius: 5px;
		text-align: center;
		line-height: 56rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #8665AF;
		margin-left: 12px;
		float: left;
	}
	.btn1{
		width: auto;
		padding: 0px 30rpx;
		height: 60rpx;
		background: #8665AF;
		border-radius: 5px;
		text-align: center;
		line-height: 60rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #fff;
		margin-left: 12px;
		float: left;
	}
	.forbtn>view{
		width: auto;
		display: table;
		float: right;
		height: auto;
		box-sizing: border-box;
	}
	.forbtn{
		width: 100%;
		height: auto;
		display: table;
		z-index: 10;
		background-color: #fff;
		position: fixed;
		left: 0px;
		z-index: 10;
		bottom: 0px;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	.contxt3>view{
		width: 100%;
		height: auto;
		display: flex;
		padding: 10rpx 0px;
		line-height: 40rpx;
		justify-content: space-between;
	}
	.contxt3>view:last-child{
		border-bottom: none;
	}
	.contxt3>view>view:nth-child(1){
		color: rgb(0,0,0);
		font-size: 25rpx;
		text-align: left;
		font-family: PingFangSC-medium;
	}
	.contxt3>view>view:nth-child(2){
		color: rgba(16,16,16,1);
		font-size: 25rpx;
		text-align: right;
		font-family: PingFangSC-regular;
		display: inline-flex;
		align-items: center;
	}
	.contxt3>view>view:nth-child(2)>image{
		width: 16px;
	}
	.contxt2>view{
		width: 100%;
		height: auto;
		display: flex;
		padding: 20rpx 0px;
		line-height: 40rpx;
		justify-content: space-between;
		border-bottom: 1px solid #EDEDED;
	}
	.contxt2>view:last-child{
		border-bottom: none;
	}
	.contxt2>view>view:nth-child(1){
		color: rgb(0,0,0);
		font-size: 25rpx;
		text-align: left;
		font-family: PingFangSC-medium;
	}
	.contxt2>view>view:nth-child(2){
		color: rgba(16,16,16,1);
		font-size: 25rpx;
		text-align: right;
		font-family: PingFangSC-regular;
	}
	
	.ztxt{
		width: 100%;
		height: auto;
		display: table;
		color: rgb(0,0,0);
		font-size: 28rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
		margin-bottom: 5px;
	}
	.ztxt1{
		width: 100%;
		height: auto;
		display: table;
		color: rgba(0,0,0,0.5);
		font-size: 24rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}
	.contxt1,.contxt2,.contxt3{
		width: 100%;
		height: auto;
		display: table;
		border-radius: 10rpx;
		background-color: #fff;
		padding:20rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}
	.txt2>view:nth-child(2){
		width: 30%;
		height: 40px;
		display: table;
		float: right;
		line-height: 40px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 350;
		font-size: 28rpx;
		color: #8665AF;
		text-align: right;
	}
	.txt2>view:nth-child(1){
		width: 70%;
		height: auto;
		display: inline-flex;
		align-items: center;
		float: left;
		line-height: 20px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		padding: 10px 0px;
	}
	.txt2>view:nth-child(1)>image{
		width: 30rpx;
	}
	.txt2{
		width: 100%;
		height: auto;
		display: table;
	}
	.zrimg{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 20rpx;
		left:0rpx;
	}
	.cplist{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
	}
	.cplist>view{
		width: 100%;
		min-height: 200rpx;
		display: table;
		box-sizing: border-box;
		padding: 20rpx 0rpx;
		box-sizing: border-box;
		padding-left: 180rpx;
		position: relative;
	}
	.cplist>view>view>view:nth-child(3){
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}
	.cplist>view>view>view:nth-child(3)>view:nth-child(1){
		color: rgba(217,104,142,1);
		font-size: 24rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.cplist>view>view>view:nth-child(3)>view:nth-child(2){
		color: rgba(209,209,209,1);
		font-size: 24rpx;
		text-align: right;
		font-family: PingFangSC-regular;
	}
	.cplist>view>view{
		width: 100%;
		min-height: 160rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
	}
	.cplist>view>view>view{
		width: 100%;
		height: auto;
		display: table;
	}
	.cplist>view>view>view:nth-child(1){
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		text-align: left;
		font-weight: 400;
		line-height: 25px;
		font-family: PingFangSC-regular;
	}
	.cplist>view>view>view:nth-child(2){
		color: rgba(209,209,209,1);
		font-size: 28rpx;
		text-align: left;
		margin-top: 10rpx;
		line-height: 25px;
		font-family: PingFangSC-regular;
	}
	.cplist>view>view>view:nth-child(2)>span{
		font-size: 24rpx !important;
	}
	.list{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		background-color: #fff;
	}
	.contxt{
		width: 100%;
		height: auto;
		display: table;
		border-radius: 10rpx;
		background-color: #fff;
		padding:0px 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}
	.contentop{
		width: 690rpx;
		height: auto;
		display: table;
		position: relative;
		top: -50rpx;
		margin-left: 30rpx;
		z-index: 10;
	}
	.contop>view{
		width: 100%;
		height: auto;
	}
	.contop>view:nth-child(1){
		color: rgba(255,255,255,1);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-bottom: 4px;
	}
	.contop>view:nth-child(2){
		color: rgb(255,255,255);
		font-size: 24rpx;
		text-align: left;
		font-family: PingFangSC-light;
	}
	.contop>view:nth-child(2)>span{
		float: right;
	}
	.contop{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		padding-bottom: 100rpx;
		background: linear-gradient(102.28deg, rgba(157,102,171,1) 5.91%,rgba(118,100,177,1) 92.44%);
	}
	page{
		background-color: #f6f6f6;
	}
	.content {
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding-bottom: 140rpx;
	}
</style>
